<template>
	<view class="wrap">
		<view class="navbar">
			<u-navbar back-text="歌单广场" :border-bottom="false"></u-navbar>
		</view>
		<u-waterfall v-model="flowList" ref="uWaterfall">

			<!-- 左侧 -->
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in left" :key="index" @tap="send(item.id)">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.name}}
					</view>
				</view>
			</template>

			<!-- 右侧 -->
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in right" :key="index" @tap="send(item.id)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.name}}
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>
</template>

<script>
</script>

<style>
</style>
